<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            margin: 100px auto;
            width: 300px;
            height: 300px;
            background-color: lightblue;
        }
        
        .btnBox {
            display: flex;
            justify-content: space-between;
        }
        
        button {
            flex: 1;
            height: 30px;
            border: 0;
            cursor: pointer;
        }
        
        .common {
            background-color: lightblue;
        }
        
        .content p {
            display: none;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="btnBox">
            <button class="btn1 common">标题一</button>
            <button class="btn2">标题二</button>
            <button class="btn3">标题三</button>
        </div>
        <div class="content">
            <p class="item" style="display:block">内容一</p>
            <p class="item">内容二</p>
            <p class="item">内容三</p>
        </div>
    </div>
    <script>
        let btn = document.querySelectorAll(".btnBox>button");
        let lastIndex = 0; // 设置上一步操作的下标
        let itemList = document.querySelectorAll(".item");
        let num = 0; // 获取num属性值

        btn.forEach(function(item, index) {
            // 开始给每个小item设置num属性（当作是索引值）
            item.setAttribute("num", index);

            item.onclick = function() {
                // 功能一：切换标题
                // 清除上一个操作的类名
                btn[lastIndex].classList.remove("common");
                // 当前button操作添加类名
                item.classList.add("common");
                // 保存操作完毕之后的下标
                lastIndex = index;

                // 功能二：切换内容
                // 方法1：
                num = item.getAttribute("num"); // 获取num属性值
                itemList.forEach(function(item, index) { // 点击更换内容
                    item.style.display = "none";
                });
                itemList[num].style.display = "block";

                // 方法2：
                itemList[num].style.display = "none"; //将上一个内容的display的属性值改为none
                itemList[index].style.display = "block"; //将点击标题对应的内容的display的属性值改为block
                num = item.getAttribute("num"); // 重新获取num属性值
            };
        });
    </script>
</body>

</html>